<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/images/font/iconfont.css">
    <%@include file="/WEB-INF/views/commons/commons.jsp" %>
    <script src="/static/js/plugins/echarts/echarts-all.js"></script>


    <style>
        *, a {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100%;
            height: 350%;
            background: #EAEAEA;

        }

        /*头部*/
        #box .box_header {
            width: 96%;
            height: 50px;
            font-size: 15px;
            position: relative;
            top: 10px;

            background: #ffffff;
            margin: 10px 20px;
        }

        #box .box_header .box_header_left {
            position: absolute;
            top: 10px;
            left: 10px;
            float: left;
        }

        #box .box_header .box_header_left div {

            float: left;
        }

        #box .box_header .box_header_left .left_saw {

            width: 2px;
            height: 15px;
            margin: 4px 5px;
            background: #31C17B;
        }

        #box .box_header .box_header_right {
            position: absolute;
            top: 10px;
            right: 0;
            float: right;
            /* width: 600px;*/
            height: 40px;

        }

        #box .box_header .box_header_right > a {
            float: left;

        }

        .cur {
            background: #31C17B;
            color: #fff
        }

        /*center*/
        #box .box_center {
            width: 96%;
            height: 80px;
            margin: 30px 10px 10px 20px;

        }

        #box .box_center ul {
            width: 100%;
            height: 100%;

        }

        #box .box_center ul li {
            background: #fff;
            float: left;
            width: 19%;
            height: 100%;
            margin-right: 1.25%;

        }

        #box .box_center ul li:last-child {
            /*  background: #fff;*/
            float: right;
            margin-right: 0;

        }

        #box .box_center ul li div {
            float: left;
            width: 60%;
            height: 50%;
            line-height: 40px;
            color: #3C3F41;
            font-size: 15px;

        }

        #box .box_center ul li .box_center_1 {
            width: 40%;
            height: 100%;
            text-align: center;

        }

        /*字体*/
        #box .box_center ul li .box_center_1 i {
            font-size: 50px;
            line-height: 80px;

        }

        /*content-info*/
        #box .content-info {
            width: 96%;
            height: 80px;
            margin: 10px 10px 10px 20px;
            background: #fff;
        }

        .content-info .infolistul {
            width: 100%;
            height: 100%;
        }

        .content-info .infolistul li {
            float: left;
            width: 25%;
            margin-right: 0%;
            text-align: center;
        }

        .content-info .infolistul li .user-analysis {
            line-height: 40px;
            font-size: 15px;
        }

        .content-info .infolistul li .user-amount {
            line-height: 40px;
            font-size: 20px;
            color: red;
        }

        /* <!--连锁门店营业数据列表分析-->*/

        .memberlist {
            min-height: 200px;
            width: 96%;
            height: 80px;
            margin: 10px 10px 20px 20px;
            background: #fff;
        }

        .colorff {
            color: red;
        }

        /*主体*/
        #box .chart {
            width: 96%;
            margin: 10px 10px 10px 20px;
        }

        #box .box_four {
            width: 96%;
            margin: 10px 10px 10px 20px;
        }

        #box .box_four .chart {
            float: left;
            height: 300px;
            width: 49%;
            margin: 10px 0;

        }

        #header_span {
            display: none;

        }

    </style>
</head>
<body>

<div id="box">
    <div class="box_header">
        <div class="box_header_left">
            <div class="left_saw"></div>
            <div>店铺概述</div>
        </div>
        <div class="box_header_right">
            <a href="#" class="easyui-linkbutton" data-options="width:80" data-cmd="queryDate" title="1">今天</a>
            <a href="#" class="easyui-linkbutton cur" data-options="width:80" data-cmd="queryDate" title="7">近7天</a>
            <a href="#" class="easyui-linkbutton" data-options="width:80" data-cmd="queryDate" title="30">近30天</a>
            <a href="#" class="easyui-linkbutton" data-options="width:80" data-cmd="queryDate">其他</a>

            &nbsp;
            <span id="header_span">
                <input class="easyui-textbox" id="endDate" name="endDate" style="width: 100px;margin-right:0;"
                       data-options="showSeconds:true" prompt="自定义天数">
            <a href="#" class="easyui-linkbutton" data-options="width:80" style="background:#31C17B;color:#fff"
               data-cmd="query">搜索</a>
            </span>


        </div>
    </div>

    <div class="box_center">
        <ul>
            <li>
                <div class="box_center_1"><i class="iconfont icon-meiyuan" style="color:#FFA184"></i></div>
                <div>散客消费</div>
                <div style="color:#FFA184;font-size: 20px">22917.39</div>
            </li>
            <li>
                <div class="box_center_1"><i class="iconfont icon-meiyuan" style="color:#89CFFF"></i></div>
                <div>会员消费</div>
                <div style="color:#89CFFF;font-size: 20px">117891</div>

            </li>

          		 

            <li>
                <div class="box_center_1"><i class="iconfont icon-shuangzhouquxianzhuxingtu"
                                             style="color:#75DDB0;font-size: 40px;"></i></div>
                <div>新增会员</div>
                <div style="color:#75DDB0;font-size: 20px">11</div>
            </li>
            <li>
                <div class="box_center_1"><i class="iconfont icon-edit1" style="color:#74DDED;font-size: 40px;"></i>
                </div>
                <div>成交笔数</div>


                <div style="color:#74DDED;font-size: 20px">371</div>

            </li>
            <li>
                <div class="box_center_1"><i class="iconfont icon-star01" style="color:#FAD21A;font-size: 40px;"></i>
                </div>
                <div>综合总收入</div>


                <div style="color:#FAD21A;font-size: 20px">140808.39</div>

            </li>
        </ul>

    </div>

    <div>
        <div id="main" class="chart" style="height: 400px;width:96%; "></div>

    </div>

    <div class="content-info">
        <ul class="infolistul infolist">
            <li style="width:25%;margin-right:0%;">

                <div class="centertext1">
                    <p class="user-analysis">营业总额</p>
                    <div class="user-amount amountcolor2" id="storeorder_receivable"><span>￥</span><i
                            id="order_receivable">102696.61</i></div>
                </div>
            </li>
            <li style="width:25%;margin-right:0%;">

                <div class="centertext1">
                    <p class="user-analysis">实收金额</p>
                    <div class="user-amount amountcolor3"><span>￥</span><i id="storecount_newmember">102696.61</i></div>
                </div>
            </li>
            <li style="width:25%;margin-right:0%;">

                <div class="centertext1">
                    <p class="user-analysis">未结金额</p>
                    <div class="user-amount amountcolor4"><span>￥</span><i id="order_unreceivable">0.00</i></div>
                </div>
            </li>
            <li style="width:25%;margin-right:0%;">

                <div class="centertext1">
                    <p class="user-analysis">优折赠</p>
                    <div class="user-amount amountcolor5" id="storeamount_all"><span>￥</span><i id="order_pdgfee">95814.23</i>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    <div>
        <div id="main2" class="chart" style="height: 400px;width:96%; background: #fff;"></div>

    </div>

    <!--连锁门店营业数据列表分析-->

    <div class="memberlist " style="margin-top:12px;min-height:200px;margin-bottom:12px;">
        <!--列表-->
        <div class="">
            <table class="table sharetable table-hover">
                <thead>
                <tr id="rowlength">
                    <th>门店名称</th>
                    <th>门店编号</th>
                    <th>营业总额</th>
                    <th>毛利润</th>
                    <th>未结金额</th>
                    <th>优折赠</th>
                </tr>
                </thead>
                <tbody id="productstorelists">
                <tr>
                    <td>肆玖小店</td>
                    <td>68446493</td>
                    <td><i class="colorff">¥102696.61</i></td>
                    <td><i class="colorff">¥25486.18</i></td>
                    <td><i class="colorff">¥0.00</i></td>
                    <td><i class="colorff">¥95814.23</i></td>
                </tr>
                </tbody>
            </table>
            <div class="footerinfo">
                <div id="selectpagesize"></div>
                <div class="fr" id="storelayerpage"></div>
            </div>
        </div>
    </div>


    <div class="box_four">
        <div id="main3" class="chart " style="margin-right: 15px;">

        </div>
        <div id="main4" class="chart "></div>
        <div id="main5" class="chart " style="margin-right: 15px;"></div>
        <div id="main6" class="chart "></div>

    </div>


</div>


<script type="text/javascript">


    $(function () {

        getData(7 , "/kinditem/list" );
        $("a[data-cmd]:lt(3)").click(function () {
            $(this).addClass("cur").siblings().removeClass("cur");
            $("#header_span").hide();
            var title = parseInt($(this).prop("title"));
           /* var arr = forDate(title);
            main(title, arr)
            main3(title);
            main4(title);
            main5(title);
            main6(title, arr);*/
            getData(title , "/kinditem/list" );
        });
        $("a[data-cmd='query']").click(function () {
            var title = $("#header_span input").val();
            if (!title) {
                return;
            }
            title = parseInt(title);
           /* var arr = forDate(title);
            main(title, arr);
            main3(title);
            main4(title);
            main5(title);
            main6(title, arr);*/
            getData(title , "/kinditem/list" );
        });
        $("a[data-cmd]:eq(3)").click(function () {
            $(this).addClass("cur").siblings().removeClass("cur");
            $("#header_span").show()
        });


    });

    //获取月份天格式07-15
    function forDate(date) {
        var arr1 = new Array(date);
        var currentDate = new Date();
        var oneTime = 1000 * 60 * 60 * 24;
        var currentTime = currentDate.getTime();


        for (var i = arr1.length; i > 0; i--) {
            var newTime = currentTime - oneTime * i;
            var yesterday = new Date(newTime);
            arr1[arr1.length - i] = ("0" + (yesterday.getMonth() + 1)).slice(-2) + "-" + ("0" + (yesterday.getDate() + 1)).slice(-2)

        }
        return arr1;

    }




    //get请求数据
    function getData(date , url){
        $.get(url, function (data) {
           /* console.log(data)
             data =JSON.parse(data);*/
            var arr = forDate(date);

            var arrM =arrMoney(arr, data);

           console.log(arrM)


            main(date, arr ,arrM);
            main3(date);
            main4(date);
            main5(date);
            main6(date, arr,arrM);

        });


    }

    //计算出数组
    function arrMoney(arr, data) {

        var arrMoney = new Array(arr.length);
        for (var i = 0; i < arr.length; i++) {
            var dayMoney = 0;
            for (var j = 0; j < data.length; j++) {
                var strTime = data[j].kdate.substring(5,10);

                if (arr[i] == strTime) {

                    dayMoney = dayMoney + data[j].price;
                }
            }

            arrMoney[i] = dayMoney;
        }


        console.log(arrMoney);
        return arrMoney

    }


    // 基于准备好的dom，初始化echarts实例
    function main(title, arr, arrM) {
        var arrRandom = new Array(arr.length );
           for(var i =0 ;i <arr.length ;i++){
               arrRandom[i] =  -Math.floor(Math.random()*100)*10 +Math.floor(Math.random()*100)*10;
           }

           console.log(arrRandom)
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            backgroundColor: '#fff',
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {

                data: ['成交', '利润'],
                x: 'right'

            },
            toolbox: {
                show: false,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: arr
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: true,    //显示纵轴false-不显示，true-显示
                    name: '近' + title + '天销售走势图(元)'   //这里是纵轴标题
                }
            ],
            series: [
                {
                    name: '成交',
                    type: 'line',
                    smooth: true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: arrM
                }, {
                    name: '利润',
                    type: 'line',
                    smooth: true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: arrRandom
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    function main6(title, arr,arrM) {



        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main6'));


        // 指定图表的配置项和数据
        option = {
            backgroundColor: '#fff',
            title: {
                text: '支出分析(近' + title + '天)',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: false ,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: arr
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    show: true,    //显示纵轴false-不显示，true-显示
                    name: '支付金额(元)'   //这里是纵轴标题
                }
            ],
            series: [
                {
                    name: '成交',
                    type: 'line',
                    smooth: false,
                   /* itemStyle: {normal: {areaStyle: {type: 'default'}}},*/
                    data:arrM,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    function main3(title) {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));

        option = {
            backgroundColor: '#fff',
            title: {
                text: '店铺业绩(近' + title + '天)',
                subtext: ''
            },
            content:{
                text: 'mance\n and Control',
                subtext: ''
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            legend: {
                orient: 'vertical',
                x: 'left',
                data: []
            },
            graphic:{
                type:'text',
                left:'center',
                top:'center',
                text:'mance\n and Control',

            },
            series: [
                {
                    name: '销售金额',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: 335, name: '会员消费'},
                        {value: 310, name: '散客消费'}

                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    function main4(title) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));

        option = {
            backgroundColor: '#fff',
            title: {
                text: '支付方式(近' + title + '天)',
                subtext: ''
            },

            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',

                bottom: 10,
                left: 'center',
                y: 'bottom',
                data: ['微信', '支付宝', '银联']
            },
            graphic: {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: 'Part1\n   财务规划，绩效和控制\n  Financial Reporting ,\nPlanning,Performance\n and Control',
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: [
                        {value: 335, name: '微信'},
                        {value: 310, name: '支付宝'},
                        {value: 234, name: '银联'}
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    function main5(title) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main5'));

        // 指定图表的配置项和数据
        option = {
            backgroundColor: '#fff',
            title: {
                text: '员工销售排行(近' + title + '天)',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['店铺账号']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: false},
                    dataView: {show: false, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: false},
                    saveAsImage: {show: false}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['1月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: true,    //显示纵轴false-不显示，true-显示
                    name: '销售金额(元)'   //这里是纵轴标题
                }
            ],
            series: [
                {
                    name: '店铺账号',
                    type: 'bar',
                    data: [10.0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
</script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    option = {
        backgroundColor: '#fff',
        title: {
            text: '',
            subtext: '门店营业额统计',
            left: 'center'

        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: []
        },
        toolbox: {
            show: false,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ['1月']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: true,    //显示纵轴false-不显示，true-显示
                name: '总金额'   //这里是纵轴标题
            }
        ],
        series: [
            {
                name: '蒸发量',
                type: 'bar',
                data: [2.0],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script type="text/javascript">


</script>
<script type="text/javascript">


</script>
<script type="text/javascript">


</script>
<script type="text/javascript">


</script>
</body>
</html>
